<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <button type="button" class="pear-btn pear-btn-primary" id="upload">
            <i class="layui-icon">&#xe681;</i>上传文件
        </button>
        <a href="/static/template/class_users.xlsx" target="_blank" class="pear-btn pear-btn-primary" >
            <i class="layui-icon">&#xe601;</i>下载模板
        </a>
        <table class="layui-table">
            <thead>
            <tr>
                <th>文件名</th>
                <th>大小</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="file1"></td>
                <td id="file2"></td>
                <td id="file3"></td>
            </tr>
            </tbody>
        </table>
        <div class="layui-row" id="app1">
            <div class="layui-btn-container">
                <button type="button" class="pear-btn pear-btn-primary" id="readCsv" onclick="readCsv()">
                    <i class="layui-icon">&#xe628;</i>读取数据
                </button>
            </div>
        </div>
    </div>
</div>
{include file="_Fragment/javascript" /}
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="/static/common/jquery-3.6.0.min.js"></script>
<script>
    var filePath = '';
    var page = 0;
    let class_id = "{$class_id}";
    layui.use(['form', 'jquery', 'upload'], function() {
        let form = layui.form;
        let upload = layui.upload;
        let $ = layui.jquery;


        upload.render({
            elem: '#upload' //绑定元素
            ,url: "{:url('Pub/upload')}" //上传接口
            ,accept: 'file' //允许上传的文件类型
            ,size: 5*1024 //最大允许上传的文件大小
            ,acceptMime:'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            ,exts:'xls|xlsx'
            ,choose: function(obj){
                obj.preview(function(index, file, result){
                    $('#file1').html(file.name);
                    $('#file2').html( (file.size/1024).toFixed(2)+'kb');
                    $('#file3').html('上传中。。。');
                });
            }
            ,done: function(res){
                //上传完毕回调
                if(res.code == 200){
                    $('#file3').html('<font color="green">上传成功</font>');
                    filePath = res.data;
                }else{
                    $('#file3').html('<font color="red">上传失败：'+ res.msg+'</font>');
                }
            }
            ,error: function(){
                //请求异常回调
                layer.msg('网络错误',{icon:2});
            }
        });
    })


    function readCsv(){
        if(filePath == ''){
            layer.msg('请先上传文件',{icon:2});
            return false;
        }
        $('#readCsv').attr('onclick','');
        readData();
    }


    function readData(){
        $.ajax({
            url:"{:url('executeImport')}",
            data:{path:filePath, class_id:class_id},
            success:function(res){
                if(res.status == 2){
                    $('#readCsv').attr('onclick','readCsv()');
                    layer.msg(res.msg,{icon:2});
                }
                if(res.status == 0){
                    $('#readCsv').attr('onclick','readCsv()');
                    layer.msg('导入成功：'+res.data[0]+'条记录,失败或过滤：'+res.data[1]+'条记录',{icon:1});
                }
            },
            error:function() {
                $('#readCsv').attr('onclick','readCsv()');
                layer.msg('网络错误',{icon:2});
            }
        });
    }

    app1 = new Vue({
        el:"#app1",
    });
</script>
<script>
</script>
</body>
</html>